<template lang="">
  <div class="container">
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 攻略查询界面 </span>
      </template>
    </el-page-header>
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto" infinite-scroll-delay="200" >
      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
    </ul>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { ref } from 'vue'
const router = useRouter();
const goBack = () => {
  router.replace({ path: "/" });
};
const count = ref(0)
const load = () => {
  count.value += 2
}
</script>
<style lang="scss">
.container{
	height: 100%;
	.infinite-list {
	  height: 100%;
	  padding: 0;
	  margin: 0;
	  list-style: none;
	}
	.infinite-list .infinite-list-item {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100px;
	  background: var(--el-color-primary-light-9);
	  margin: 10px;
	  color: var(--el-color-primary);
	}
	.infinite-list .infinite-list-item + .list-item {
	  margin-top: 10px;
	}
}
</style>
